<script setup lang="ts">
import { ref } from 'vue';


const getEyesBottomItemClass = (butttonName:string) => {
    if (currentEyeButtomName.value === butttonName) {
        return 'button-item-active'
    }
    else{
        return 'button-item'
    }
    
}

//当前选中的按钮
const currentEyeButtomName = ref<string>("")

//左点击触发
const LeftButtomOnClick = () => {
    currentEyeButtomName.value = 'left'
}

//上点击触发
const UpButtomOnClick = () => {
    currentEyeButtomName.value = 'up'
}

//下点击触发
const DownButtomOnClick = () => {
    currentEyeButtomName.value = 'down'
}

//右点击触发
const RightButtomOnClick = () => {
    currentEyeButtomName.value = 'right'
}

</script>

<template>
    <div class="button-div">
        <div :class="getEyesBottomItemClass('left')" @click="LeftButtomOnClick">
            <span class = "eyes-bottom-word">左</span>            
        </div>
        <div class="inside-div">
            <div :class="getEyesBottomItemClass('up')" @click="UpButtomOnClick">
                <span class = "eyes-bottom-word">上</span>            
            </div>
            <div :class="getEyesBottomItemClass('down')" @click="DownButtomOnClick">
                <span class = "eyes-bottom-word">下</span>            
            </div>
        </div>
        <div :class="getEyesBottomItemClass('right')" @click="RightButtomOnClick">
            <span class = "eyes-bottom-word">右</span>            
        </div>
    </div>
</template>

<style scoped>
.button-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    height: 150px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px;
    right: 60px;
    z-index: 2;


    .inside-div{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .button-item-active{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: aqua;
        border-radius: 25px;
        border: solid 2px skyblue;

        .eyes-bottom-word{
            color: #202255;
        }

    }

    .button-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: solid 2px skyblue;
        background-color: #153b62;

        .eyes-bottom-word{
            color: #5774c5;
        }
    }

    .button-item, .button-item-active .eyes-bottom-word {
        font-size: 15px;
        line-height: 32px;
        user-select: none;
    }
    .button-item,.button-item-active,.inside-div .cursor{
        cursor: pointer;
    }

}


</style>